@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/public.css')}}">
@section('content')
<div class="mainHrContent" id="hrfeedback_add">
    <div class="storelistTitle">
        <span class="storelistTitle_left">
            <span>
                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.suppliermy.supplierIndex') }}">供应商中心</a>
                > 投诉与建议
            </span>
        </span>
        <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click="window.location.href ='{{ route('home.demand.demandAdd')}}'">免费发布需求</button>
        </span>
    </div>
    <div class="hrContent">
        @include('home.suppliermy.menu')
        <div class="basicInfo" id="hrfeedback_adds">
            <div class="basicInfo_title">
                <span></span>
                投诉与建议 > 编写建议
            </div>
            <div class="feedback_addMain">
                <el-upload class="upload-demo" :action="uploadUrl" :file-list="fileList3" :on-remove="handleRemove" :on-success="handleChange" list-type="picture">
                    <span class="addPicture">
                        <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                        添加图片
                    </span>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
                </el-upload>
                <textarea v-model="content" placeholder="请具体描述您的建议">

                </textarea>
                <button @click="submitContent">发送</button>
            </div>
        </div>
    </div>
</div>
<style>
    .hrContent .el-upload__input {
        display: none;
    }

    .feedback_addMain {
        width: 900px;
        margin: auto;
    }

    .feedback_addMain textarea {
        width: 900px;
        height: 400px;
        resize: none;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(204, 204, 204, 1);
        opacity: 1;
        padding: 10px;
    }

    .addPicture {
        display: flex;
        margin-bottom: 20px;
        align-items: center;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .addPicture>img {
        height: 20px;
        width: 20px;
        margin-right: 10px;
    }

    .feedback_addMain button {
        display: block;
        margin: auto;
        margin-top: 40px;
        width: 122px;
        height: 30px;
        background: rgba(209, 0, 24, 1);
        border: 0px;
        border-radius: 4px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 30px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
    }
</style>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrfeedback_add = new Vue({
            el: '#hrfeedback_adds',
            data: () => {
                return {
                    uploadUrl: UPLOAD_FILE,
                    fileList3: [],
                    imgList: [],
                    pageNumber: 1,
                    content: "",
                }
            },
            created() {},
            mounted() {},
            methods: {
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    return isJPG && isLt2M;
                },
                handleChange(file, fileList) {
                    this.fileList3.push(fileList.url);
                    this.imgList.push(fileList.response.data.path)
                },
                handleRemove(file, fileList) {
                    fileList.forEach(element => {
                        this.fileList3.push(element.url);
                        this.imgList.push(element.response.data.path)
                    });
                },
                submitContent() {
                    let data = {
                        content: this.content,
                        images: this.imgList.join()
                    }
                    apiAjax("{{ route('home.user.userFeedbacksAddApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            window.location.href = "{{ route('home.hrmy.hrFeedBack') }}";
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
            }
        })
    })
</script>
@endsection